<template>
	<view class="box">
		<view class="list">
			<view class="f-w">
				<view class="label">收货人：</view>
				<view class="input">
					<input type="text" v-model="name" placeholder="请填写收货人姓名" maxlength="8" />
				</view>
			</view>
			<view class="f-w">
				<view class="label">手机号码：</view>
				<view class="input">
					<input type="number" v-model="mobile" placeholder="请填写收货人电话" maxlength="11" />
				</view>
			</view>
	<!-- 		<view class="f-w" @click="showpop">
				<view class="label">所在地区：</view>
				<view class="input">
					<view class="fw-bt">
						<input type="text" v-model="address1" placeholder="请选择省市区" maxlength="100" disabled />
						<image src="https://jw.xzsw2021.com/static/client/icon_56@2x.png" mode=""></image>
					</view>
				</view>
			</view> -->
			<view class="f-w">
				<view class="label">详细地址：</view>
				<view class="input fw-bt" @click="goDetailAddress">
					<!-- <input type="text" v-model="address" placeholder="选择收货地址" maxlength="100" disabled /> -->
					<view :class="address?'':'c777'">{{address||'选择收货地址'}}</view>
					<image src="https://jw.xzsw2021.com/static/client/icon_56@2x.png" mode=""></image>
				</view>
			</view>
			<view class="f-w">
				<view class="label">门牌号：</view>
				<view class="input">
					<input type="text" v-model="address2" placeholder="详细地址,例1层101室" maxlength="50" />
				</view>
			</view>
		</view>
		<view class="bg"></view>
		<view class="bottom">
			<view class="fw-bt">
				<view class="label">设为默认地址</view>
				<view class="swith">
					<u-switch activeColor="#22B591" inactiveColor="rgb(202, 202 ,202)" v-model="value" @change="change">
					</u-switch>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="descbg">
				<view class="lesstitle">
					<view style="color: #9DA1A9;" @click="cancel">取消</view>
					<view @click="chooseAddress">完成</view>
				</view>
				<picker-view style="width: 100%; height: 400rpx" @change="bindAddressChange" :value="regionValue">
					<picker-view-column>
						<view v-for="(item,index) in sheng" :key="index" style="line-height: 50px" class="lessitem">
							{{item.name}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in shi" :key="index" style="line-height: 50px" class="lessitem">
							{{item.name}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in qu" :key="index" style="line-height: 50px" class="lessitem">
							{{item.name}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

		<!-- 确认添加 -->
		<view class="btn" @click="submit">{{buttonTitle}}</view>
	</view>
</template>

<script>
	import {
		userAddressUpdateApi
	} from '@/api/user.js'
	export default {
		data() {
			return {
				buttonTitle: "确认添加",
				goData: {
					longitude: '', //精度
					latitude: '', //纬度
					address_id: 0, //0为新增  地址id
				}, //添加地址信息
				regionValue: [],
				sheng: [],
				choosesheng: '',
				shi: [],
				chooseshi: '',
				qu: [],
				choosequ: '',
				value: false, //
				name: '',
				mobile: '',
				province: '',
				city: '',
				area: '',
				address1: '', //省市区合
				address: '', //详细地址
				address2: '', //门牌号
			}
		},
		onLoad(option) {
			this.getProvinceList();
			if (option.data) {
				this.buttonTitle = '确认修改'
				let a = JSON.parse(option.data);
				this.name = a.real_name;
				this.mobile = a.phone;
				this.goData.latitude = a.latitude;
				this.goData.longitude = a.longitude;
				this.goData.address_id = a.address_id;
				this.address1 = a.province + a.city + a.district;
				this.address = a.address;
				this.address2 = a.address2
				if (a.is_default) {
					this.value = true;
				}
				//获取省信息
				this.$request('v2/system/city/lst/0', {}, 'GET').then(res2 => {
					if (res2.status == 200) {
						res2.data.forEach((ele, index) => {
							if (ele.id * 1 == a.province_id * 1) {
								this.isShow = false;
								this.$set(this.regionValue, 0, index)
								this.$set(this.regionValue, 1, index)
								this.$set(this.regionValue, 2, index)
								console.log(ele)
								return this.choosesheng = ele;
							}
						})
					}
				})
				//获取省信息
				this.$request(`v2/system/city/lst/${a.province_id}`, {}, 'GET').then(res2 => {
					if (res2.status == 200) {
						res2.data.forEach((ele, index) => {
							if (ele.id * 1 == a.city_id * 1) {
								this.isShow = false;
								this.$set(this.regionValue, 1, index)
								this.$set(this.regionValue, 2, index)
								return this.chooseshi = ele;
							}
						})
					}
				})
				//获取省信息
				this.$request(`v2/system/city/lst/${a.city_id}`, {}, 'GET').then(res2 => {
					if (res2.status == 200) {
						res2.data.forEach((ele, index) => {
							if (ele.id * 1 == a.district_id * 1) {
								this.isShow = false;
								this.$set(this.regionValue, 2, index)
								return this.choosequ = ele;
							}
						})
					}
				})
			} else {
				this.buttonTitle = '确认添加'
			}
		},
		watch: {
			choosesheng(e) {
				this.getcity()
			},
			chooseshi(e) {
				this.getqu()
			},
			regionValue(e) {
				console.log(e)
			}
		},
		methods: {
			chooseAddress() {
				this.$refs.popup.close()
				this.address1 = this.choosesheng.name + this.chooseshi.name + this.choosequ.name
			},
			getProvinceList() {
				this.$request('v2/system/city/lst/0', {}, 'GET').then(res => {
					this.sheng = res.data
					this.choosesheng = res.data[0]
				})
			},
			// 获取选择是市
			getcity() {
				this.$request('v2/system/city/lst/' + this.choosesheng.id, {}, 'GET').then(res => {

					this.shi = res.data
					this.chooseshi = res.data[0]
				})
			},
			getqu() {
				this.$request('v2/system/city/lst/' + this.chooseshi.id, {}, 'GET').then(res => {
					this.qu = res.data
					this.choosequ = res.data[0]

				})
			},
			// 改变滚轮
			bindAddressChange(e) {
				console.log(e)
				let that = this;
				let i1 = e.detail.value[0];
				let i2 = e.detail.value[1];
				let i3 = e.detail.value[2];
				let sheng = that.sheng
				let shi = that.shi
				let qu = that.qu;

				// 选择的
				let provinceid = sheng[i1].id;
				let cityid = shi[i2].id;
				let areaid = qu[i3].id;
				// data的
				let provinceid1 = that.choosesheng.id
				let cityidid1 = that.chooseshi.id
				let areaid1 = that.choosequ.id

				this.choosesheng = sheng[i1]
				this.chooseshi = shi[i2]
				this.choosequ = qu[i3]

				this.regionValue = [i1, i2, i3];

				if (provinceid1 != provinceid) {
					this.regionValue = [i1, 0, 0];
				}
				if (cityid != cityidid1) {
					this.regionValue = [i1, i2, 0];
				}
			},
			cancel() {
				this.$refs.popup.close()
			},
			showpop() {
				this.$refs.popup.open();
				if (!this.regionValue.length) {
					this.regionValue = [0, 0, 0]
				}
				console.log(this.regionValue)
			},
			// 省市区选择
			bindAddress(e) {
				let arr = e.detail.value;
				console.log(e.detail.value);
				this.province = arr[0];
				this.city = arr[1];
				this.area = arr[2];
				this.address1 = `${arr[0]} ${arr[1]} ${arr[2]}`;
			},
			// 选择详细地址
			goDetailAddress() {
				console.log('打开地图');
				let _this = this;
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						_this.goData.latitude = res.latitude;
						_this.goData.longitude = res.longitude;
						console.log(_this.goData, '提交');
						_this.address = res.address + " " + res.name;
					}
				});

			},
			// 开关切换
			change(e) {
				console.log('change', e);
			},
			// 确认添加
			submit() {
				if (!this.name) {
					this.$showToast('请输入收货人姓名');
					return false
				}
				if (!this.mobile) {
					this.$showToast('请输入收货人电话');
					return false
				}
				if (!this.$checkStr(this.mobile, 'mobile')) {
					this.$showToast('手机号格式错误');
					return false
				}
			 
				if (!this.address) {
					this.$showToast('请选择收货地址');
					return false
				}
				// if (!this.address2) {
				// 	this.$showToast('请输门牌号');
				// 	return false
				// }
				if (!this.goData.latitude || !this.goData.longitude) {
					this.$showToast('请重新获取详细地址');
					return false
				}
				let isshow = 0;
				if (this.value) {
					isshow = 1;
				}
	
				// console.log({
				// 	...this.goData,
				// 	real_name: this.name,
				// 	phone: this.mobile,
				// 	detail: this.address + this.address2,
				// 	area: [this.choosesheng, this.chooseshi, this.choosequ],
				// 	is_default: isshow, //默认地址
				// 	address2: this.address2
				// })
				// return;
				this.$request('user/address/create', {
					...this.goData,
					real_name: this.name,
					phone: this.mobile,
					detail: this.address + "___" + this.address2,
					area: [{"id":4,"path":"/","parent_id":0,"type":"province","level":1,"snum":40,"name":"重庆","create_time":"2021-07-26 12:30:45"},{"id":113,"path":"/4/","parent_id":4,"type":"city","level":2,"snum":53,"name":"万州区","create_time":"2021-07-26 14:04:10"},{"id":9786,"path":"/4/113/","parent_id":113,"type":"area","level":3,"snum":0,"name":"白土镇","create_time":"2021-07-26 14:05:14"}],
						 // area:[this.choosesheng,this.chooseshi,this.choosequ],
					is_default: isshow, //默认地址
					address2: this.address2
				}, 'POST').then(res => {
					console.log(res, '信息');
					if (res.status * 1 == 200) {
						this.$showToast('地址添加成功');
						setTimeout(e => {
							// uni.redirectTo({
							// 	url: '../address/address'
							// }, 300)
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.descbg {
		height: 600rpx !important;
		width: 100%;
		background: #FFFFFF;
	}

	.lessitem {

		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.lesstitle {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #277EFA;

		display: flex;
		justify-content: space-between;
		height: 46rpx;
		box-sizing: border-box;
		padding-left: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding-right: 30rpx;

	}

	.box {
		font-size: 30rpx;

		.c777 {
			color: #777777;
		}

		.list {
			padding: 0 30rpx;

			&>view {
				// min-height: 100rpx;
				padding: 30rpx 0;
			}

			&>view:not(:last-child) {
				border-bottom: 1rpx solid #eee;
			}

			.label {
				width: 200rpx;
			}

			.input {
				flex: 1;

				input {
					min-width: 460rpx;
				}

				&>view {
					min-width: 450rpx;
				}

				image {
					flex-shrink: 0;
					width: 11rpx;
					height: 19rpx;
				}
			}
		}

		.bg {
			width: 750rpx;
			height: 20rpx;
			background: #F8F8F8;
		}

		.bottom {
			padding: 0 30rpx;

			&>view {
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
			}
		}

		.btn {
			margin: 350rpx auto 0;
			width: 610rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: linear-gradient(64deg, #2BCCA5, #22B591);
			box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
			border-radius: 10rpx;
		}
	}
</style>
